<template>
  <div>
    <div class="common-choice">
      <div class="form-label2">
        <label>
          {{rangeNum}}题共用备选答案
        </label>
      </div>
      <div v-for="item in form.options1" :key="item.code" class="common-choice-item">
        <div class="item-label">{{item.code}}</div>
        <div class="edit-wrap">
          <editor v-model="item.content" :readOnly="readOnly" :min-height="180"/>
        </div>
      </div>
      <div v-if="!readOnly" class="choice-more">
        <i class="el-icon-plus" style="color: #409eff"></i><span @click="onAdd1">添加选项</span>
      </div>
      <div class="form-label2">
        <label>小题</label>
      </div>
      <div v-for="item in form.options2" :key="item.code" class="common-choice-item">
        <div class="item-label">({{item.code}})</div>
        <div class="edit-wrap">
          <editor v-model="item.content" :readOnly="readOnly" :min-height="180"/>
        </div>
      </div>
      <div v-if="!readOnly" class="choice-more">
        <i class="el-icon-plus" style="color: #409eff"></i><span @click="onAdd2">添加小题</span>
      </div>
    </div>
    <div class="form-label2">
      <label>答案</label>
      <p>（在当前页面选中的答案为本题正确答案）</p>
    </div>
    <div class="third-indent answer">
      <div class="connector-vertic-center" v-for="(item, index) in form.answer.links" :key="index">
        <span>({{item.left}}) -------</span>
        <el-select v-model="item.right" :disabled="readOnly" placeholder="请选择" size="mini">
          <el-option
            v-for="selectItem in form.options1"
            :key="selectItem.code"
            :label="selectItem.code"
            :value="selectItem.code">
          </el-option>
        </el-select>
      </div>
    </div>
  </div>
</template>
  
<script>
// 共用选项题
const letterList = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N'];
const defaultForm = JSON.stringify({
  options1: [{ code: 'A', content: '' }],
  options2: [{ code: '1', content: '' }],
  answer: { links: [{ left: '1', right: 'A' }] }
});

export default {
  name: "ShareChoice",
  props: {
    initialVals: {
      type: Object,
      default: () => ({}),
    },
    clean: {
      type: String,
      default: '',
    },
    readOnly: {
      type: Boolean,
      default: false,
    },
    validate: {  // 触发内层表单校验
      type: String,
      default: ''
    }
  },
  data() {
    return {
      form: JSON.parse(defaultForm)
    }
  },
  computed: {
    rangeNum() {
      const opt2 = this.form.options2;
      const beginNo = `(${opt2[0].code})`;
      const endNo = opt2.length > 1 ? ` - (${opt2[opt2.length - 1].code})` : '';
      return beginNo + endNo;
    }
  },
  watch: {
    initialVals: {
      handler(val) {
        if (Object.keys(val).length > 0) this.form = { ...this.form, ...val };
      },
      immediate: true,
    },
    validate: {
      handler(val) {
        // TODO: 校验表单
        console.log(val);
        this.$emit('onValid', true);
      }
    },
    clean: {
      handler(val) {
        if (val) this.form = JSON.parse(defaultForm);
      }
    },
    form: {
      handler(val) {
        this.$emit('change', JSON.parse(JSON.stringify(val)));
      },
      deep: true
    }
  },
  methods: {
    onAdd1() {
      const options1 = this.form.options1.slice();
      options1.push({ code: letterList[options1.length], content: '' });
      this.form.options1 = options1;
    },
    onAdd2() {
      const options2 = this.form.options2.slice();
      const answer = JSON.parse(JSON.stringify(this.form.answer));
      options2.push({ code: `${options2.length + 1}`, content: '' });
      answer.links.push({ left: `${options2.length}`, right: '' });
      this.form = { ...this.form, options2, answer };
    }
  }
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
    